<template>
    <div class="course-library-page">
        <el-card shadow="never" class="mt-4">
            <el-button type="primary" @click="onDialog">新增</el-button>
            <div class="mt-4" v-loading="loading">
                <el-table :data="data">
                    <el-table-column label="课程名称" prop="name"></el-table-column>
                    <el-table-column label="跳转链接" prop="url"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="onEditClick(row)">编辑</el-button>
                            <el-button type="text" @click="onDeleteClick(row)" class="red-color">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer flex justify-end items-center">
                <el-pagination
                    @current-change="fetchData"
                    @size-change="fetchData"
                    class="center"
                    :current-page.sync="form.page"
                    :page-size.sync="form.size"
                    :page-sizes="[10, 25, 50]"
                    layout="sizes, total, prev, pager, next, jumper"
                    :total="totalElements">
                </el-pagination>
            </div>
        </el-card>

        <el-drawer
            title="课程新增&编辑"
            :visible.sync="drawer"
            direction="rtl"
            size="50%"
            :before-close="handleClose">
            <div class="px-2 py-2">
                <el-form label-position="right" label-width="100px">
                    <el-form-item label="课程名称:" required>
                        <el-input
                            v-model.trim="dialogForm.name"
                            class="input-width"
                            placeholder="请输入课程名称"></el-input>
                    </el-form-item>
                </el-form>
                <el-form label-position="right" label-width="100px">
                    <el-form-item label="跳转链接:" required>
                        <el-input
                            v-model.trim="dialogForm.url"
                            class="input-width"
                            placeholder="请输入跳转链接"></el-input>
                    </el-form-item>
                </el-form>
                <div class="text-center">
                    <el-button @click="postData" type="primary">确 定</el-button>
                    <el-button @click="onDialog">返 回</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { Drawer } from 'element-ui';

export default {
    components: {
        ElDrawer: Drawer,
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            drawer: false,
            data: [],
            form: {
                page: 1,
                size: 10,
            },
            totalElements: 0,

            dialogForm: {
                name: '',
                url: '',
            },
        };
    },
    watch: {
        drawer(val) {
            if (!val) {
                this.dialogForm = {
                    theme: '',
                    url: '',
                };
            }
        },
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get('recommend_course', {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        onEditClick(row) {
            this.onDialog();
            this.dialogForm = {...row};
        },
        onDeleteClick(row) {
            $ele.$confirm('是否删除此课程？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`recommend_course/${row.id}`, {
                }).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },

        onDialog() {
            this.drawer = !this.drawer;
        },
        handleClose(done) {
            $ele.$confirm('确认关闭？')
                .then(() => {
                    done();
                })
                .catch(() => {});
        },

        // dialogForm
        postData() {
            const form = this.dialogForm;
            const messageTip = $ele.$message;

            if (!form.name) return messageTip.warning('请输入名称');
            if (!form.url) return messageTip.warning('请输入跳转链接');

            let method = 'post';
            let message = '新增成功';

            if (this.dialogForm.id) {
                method = 'put';
                message = '编辑成功';
            }

            this.loading = true;
            API[method]('recommend_course', this.dialogForm).then(() => {
                messageTip.success(message);
                this.onDialog();
                this.fetchData();
            }).finally(() => this.loading = false);
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.course-library-page {
    .footer {
        height: 44px;
        background: #f7f7f7;
        padding-left: 20px;
        padding-right: 20px;
    }

    .input-width {
        max-width: 300px;
    }

    .el-drawer__header > :first-child,
    .el-drawer__open .el-drawer.rtl {
        outline: none;
    }
}
</style>
